<!DOCTYPE html>
<html>
<head>
	<title>计算属性</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		firstName:<input type='text' v-model="firstName"><br>
		lastName:<input type="text" v-model="lastName"><br>
		<div v-text="fullName"></div>
		<div v-text="fullName2"></div>
		<div>message:{{message}}</div>
		<div>reverseMessage:{{reverseMessage}}</div>
		<div>reverseMessage2:{{reverseMessage2()}}</div>
		<div>date:{{date}}</div>
		<div>currentDate:{{currentDate()}}</div>
	</div>
	<script>
		var app = new Vue({
			el : '#app' ,
			data : {
				firstName : 'Dell',
				lastName : 'Lee',
				fullName2 : '',
				message : 'hello'
			},
			computed: {
				fullName : {
					get : function() {
					return this.firstName + ' ' + this.lastName;
					},
					set : function(value) {
						var arr = value.split(" ");
						this.firstName = arr[0];
						this.lastName = arr[1];
					}
				},
				reverseMessage: {
					get : function() {
						return this.message.split("").reverse().join("");
					},
					set : function(value) {
						this.message = value;
					}
				},
				date: function() {
					return Date.now();
				}
			},
			watch: {
				firstName : function(value) {
					this.fullName2 = value + ' ' + this.lastName;
				},
				lastName : function(value) {
					this.fullName2  = this.firstName + ' ' + value;
				}
			},
			methods: {

				reverseMessage2 : function() {
					return this.message.split("").reverse().join("");
				},
				currentDate : function() {
					return Date.now()
				}
			}
		});
	</script>
</body>
</html>